<template>
  <view style="padding: 20rpx;">
    <!-- 用户头像与认证 -->
    <view style="text-align: center;">
      <image :src="user.avatar" style="width: 200rpx; height: 200rpx; border-radius: 50%;"></image>
      <view style="margin: 10rpx 0; font-size: 32rpx; font-weight: bold;">{{ user.name }}</view>
    </view>

    <!-- 功能模块 -->
    <view style="margin: 20rpx 0;" class="box">
      <view style="display: flex; justify-content: space-around;margin: 20rpx 0">
        <view class="cartegory-item" @click="goPage('/pages/myOrders/myOrders')">
          <image src="/static/imgs/订单.png" style="width: 80rpx; height: 80rpx;"></image>
          <text>会员卡订单</text>
        </view>
        <view class="cartegory-item" @click="goPage('/pages/myOrders/myOrders')">
          <image src="/static/imgs/订单.png" style="width: 80rpx; height: 80rpx;"></image>
          <text>资料订单</text>
        </view>
      </view>

      <view style="display: flex; justify-content: space-around;margin: 20rpx 0">
        <view class="cartegory-item" @click="goPage('/pages/grid/grid')">
          <image src="/static/imgs/我的预约.png" style="width: 80rpx; height: 80rpx;"></image>
          <text>我要预约</text>
        </view>
         <view class="cartegory-item" @click="goPage('/pages/myReserve/myReserve')">
           <image src="/static/imgs/预约.png" style="width: 80rpx; height: 80rpx;"></image>
           <text>我的预约</text>
         </view>

      </view>

      <view style="display: flex; justify-content: space-around;margin: 20rpx 0">
        <view class="cartegory-item" @click="goPage('/pages/whoNb/whoNb')">
          <image src="/static/imgs/排行榜.png" style="width: 80rpx; height: 80rpx;"></image>
          <text>排行榜</text>
        </view>
        <view class="cartegory-item" @click="goPage('/pages/cardUse/cardUse')">
          <image src="/static/icons/记录.png" style="width: 80rpx; height: 80rpx;"></image>
          <text>会员卡使用记录</text>
        </view>
      </view>

      <view style="display: flex; justify-content: space-around;margin: 20rpx 0">
        <view class="cartegory-item" @click="goPage('/pages/clock/clock')">
          <image src="/static/imgs/打卡记录.png" style="width: 80rpx; height: 80rpx;"></image>
          <text>打卡记录</text>
        </view>
        <view class="cartegory-item" @click="showServicePopup = true">
          <image src="/static/imgs/客服.png" style="width: 80rpx; height: 80rpx;"></image>
          <text>联系客服</text>
        </view>
      </view>

      <view style="display: flex; justify-content: space-around;margin: 20rpx 0">
        <view class="cartegory-item" @click="goPage('/pages/person/person')">
          <image src="/static/imgs/个人信息.png" style="width: 80rpx; height: 80rpx;"></image>
          <text>个人信息</text>
        </view>
        <view class="cartegory-item" @click="logout">
          <image src="/static/imgs/退出.png" style="width: 80rpx; height: 80rpx;"></image>
          <text>退出登录</text>
        </view>
      </view>

      <!-- 客服信息弹窗 -->
      <view v-if="showServicePopup" class="popup-mask">
        <view class="popup-content service-popup">
          <text class="popup-title">联系客服</text>
          <view class="service-popup-content">
            <view class="wechat-info">
              <uni-icons type="weixin" size="24" color="#07C160"></uni-icons>
              <text class="wechat-text">客服微信号：{{ getValueByName('客服微信号') || '未设置' }}</text>
            </view>
            <image
                :src="getValueByName('客服微信二维码') || '/static/images/default-qrcode.png'"
                class="qrcode-img"
                mode="widthFix"
            ></image>
          </view>
          <button class="popup-btn" @click="showServicePopup = false">关闭</button>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: uni.getStorageSync('xm-user') || {
        name: '游客',
        avatar: '/static/imgs/default-avatar.png',
        isRider: false,
      },
      showServicePopup: false,
      tableData: []
    }
  },
  onLoad() {
    this.loadValue();
  },
  methods: {
    logout() {
      uni.removeStorageSync('xm-user')
      uni.removeStorageSync('orderStore')  // 清除缓存数据
      uni.reLaunch({
        url: '/pages/login/login'
      })
    },
    goPage(url) {
      uni.navigateTo({ url });
    },
    // 根据名称获取对应的值
    getValueByName(name) {
      const item = this.tableData.find(item => item.name === name);
      return item ? item.value : '';
    },
    // 加载系统配置数据
    loadValue() {
      this.$request.get('/sysValue/selectAll').then(res => {
        this.tableData = res.data || [];
      }).catch(err => {
        console.error('加载系统配置失败:', err);
      });
    },
  }
}
</script>

<style>
.title {
  font-weight: bold;
  font-size: 36rpx;
  margin-bottom: 30rpx;
}
.cartegory-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10rpx;
  margin-bottom: 20rpx;
}
.cartegory-item text {
  font-size: 28rpx;
  color: #333;
}
.info-item {
  padding: 15rpx;
  border-bottom: 2rpx solid #eee;
  display: flex;
  align-items: center;
}
.info-item .uni-icons {
  position: relative;
  top: 2rpx;
}
.box {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

/* 弹窗通用样式 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-content {
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  text-align: center;
  box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.2);
}

.popup-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

.popup-text {
  font-size: 32rpx;
  color: #333;
  display: block;
  margin-bottom: 30rpx;
  line-height: 50rpx;
}

.popup-btn {
  background-color: #007aff;
  color: #fff;
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  border-radius: 35rpx;
  margin-top: 20rpx;
}
.qrcode-img {
  width: 200rpx;
  height: 200rpx;
  border: 1rpx solid #eee;
  padding: 10rpx;
}
</style>
